<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <script src="vue.min.js"></script>
    <script src="test.js"></script>
    <style>
    .poke {}
    .hp, .mp, .exp { width: 100px; height: 15px; border: 1px solid #aaa; border-radius: 3px; overflow: hidden; padding: 1px; position: relative; }
    .exp { height: 3px; }
    .hptext, .mptext { font-size: 13px; color: #333; text-align: center; position: absolute; left:0; right:0; height: 100%; }
    .curhp, .curmp, .curexp { width: 100px; height: 15px; background-color: hsl(100, 100%, 43%); transition: 500ms; }
    .curmp { background-color: hsl(185, 100%, 43%); }
    .curexp { background-color: hsl(52, 100%, 43%); }
    .my .curhp { transition: 500ms 500ms; }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- battle -->
      <div id="battle">
        <!-- my poke -->
        <div class="my poke">
          <div class="namelevel">
            <span class="name">My</span>
            <span class="level">Lv.{{my.level}}</span>
            <span class="msg">{{msg}}</span>
          </div>
          <div class="hp">
            <div class="hptext">{{my.hp}} / {{my.maxhp}}</div>
            <div class="curhp" v-bind:style="{width: curhp(my)+'%', 'background-color': 'hsl('+curhp(my)+',100%,43%)'}"></div>
          </div>
          <div class="mp">
            <div class="mptext">{{my.mp}} / {{my.maxmp}}</div>
            <div class="curmp" v-bind:style="{width: curmp(my)+'%'}"></div>
          </div>
          <div class="exp">
            <div class="curexp" v-bind:style="{width: curexp(my)+'%'}"></div>
          </div>
        </div>
        <!-- my poke end -->

        <!-- enemy poke -->
        <div v-if="scene == 'fight'" class="enemy poke">
          <div class="namelevel"><span class="name">Enemy</span> <span class="level">Lv.{{enemy.level}}</span></div>
          <div class="hp">
            <div class="hptext">{{enemy.hp}} / {{enemy.maxhp}}</div>
            <div class="curhp" v-bind:style="{'width': curhp(enemy)+'%', 'background-color': 'hsl('+curhp(enemy)+',100%,43%)'}"></div>
          </div>
        </div>
        <!-- enemy poke end -->

        <!-- battle panel -->
        <div v-if="scene == 'fight'" class="battle-panel">
          <button onclick="attack()">Attack</button>
          <button onclick="magicTo()">Magic</button>
          <button onclick="guard()">Guard</button>
        </div>
        <!-- battle panel end -->

      </div><!-- battle -->
      <!-- battle end -->

      <!-- map -->
      <div v-if="scene == 'map'" id="map">
        <button onclick="meetEnemy()">Go to Fight!</button>
        <button onclick="my.heal()">Take a rest</button>
      </div>
      <!-- map end -->

    </div><!-- app -->
  </body>
</html>
